import HttpUtils from "@page/common/utils/HttpUtils";
import "./style.scss";
import orange from "@assets/supplierShop/orange.png";
import blue from "@assets/supplierShop/blue.png";
import red from "@assets/supplierShop/red.png";
import green from "@assets/supplierShop/cyan.png";
import urlHook from "@page/common/utils/urlHook";
import Button from "@ui/RJMart/button";
import Icon from "@ui/RJMart/icons";

class ShopDiscount extends React.Component {
    constructor() {
        super();
        this.state = {
            couponList: [],
            isShowModal: false
        };
    }
    componentDidMount() {
        this.getCouponForOrg();
    }

    componentWillUpdata(nextProps, nextState) {
        console.log(nextProps, nextState);
    }

    //获取店铺优惠券
    getCouponForOrg() {
        const { id } = this.props;
        let params = { id };
        HttpUtils.getCouponForOrg(params)
            .then(res => {
                let copyCouponList = res.cupons;
                copyCouponList.forEach((v, k) => {
                    if (v.couponNumber <= 50) {
                        v.backgroundColor = blue;
                        v.color = "#219AEF";
                    } else if (v.couponNumber >= 50 && v.couponNumber <= 200) {
                        v.backgroundColor = green;
                        v.color = "#11CBA8";
                    } else if (200 <= v.couponNumber && v.couponNumber <= 500) {
                        v.backgroundColor = orange;
                        v.color = "#FFAE4E";
                    } else if (v.couponNumber > 500) {
                        v.backgroundColor = red;
                        v.color = "#FF4F50";
                    }
                });
                this.setState({
                    couponList: copyCouponList
                });
            })
            .catch(err => {
                console.log(err);
            });
    }

    //立即领取
    addCouponForOrgClick(item, index) {
        // if (item.disabled) return;
        let params = { settingId: item.settingId };
        HttpUtils.addCouponForOrg(params)
            .then(res => {
                console.log(res);

                this.renderModal(res);
            })
            .catch(err => {
                console.log(err);
            });
    }

    renderModal(res) {
        this.result = res;
        this.setState({
            isShowModal: true
        });
    }

    hideCb = isShow => {
        this.setState({
            isShowModal: isShow
        });
    };

    //更多
    moreClick = () => {
        window.open(urlHook.cardpack, "_blank");
    };

    render() {
        const { couponList, isShowModal } = this.state;

        return (
            <div className={couponList.length > 0 ? "rj_shop-discount" : ""}>
                {couponList.length > 0 &&
                    couponList.map((item, index) => {
                        return (
                            <div key={index} className="rj_discount-item">
                                <img src={item.backgroundColor} />
                                <div className="rj_card-left">
                                    <div className="rj_card-l-top">
                                        <em>￥</em>
                                        <span>{item.couponNumber}</span>
                                    </div>
                                    <div className="rj_card-l-bottom">
                                        现金券
                                    </div>
                                </div>
                                <div className="rj_card-right">
                                    <div className="rj_card-r-top">
                                        {item.buyerPurchase === 10 && (
                                            <span>
                                                <em>满</em>
                                                <span>
                                                    {item.buyerPurchasesNumber}
                                                </span>
                                                <span>件可用</span>
                                            </span>
                                        )}
                                        {item.buyerPurchase === 20 && (
                                            <span>
                                                <em>满</em>
                                                <span>
                                                    {item.buyerPurchasesNumber}
                                                </span>
                                                <span>可用</span>
                                            </span>
                                        )}
                                        {item.buyerPurchase === 30 && (
                                            <span>
                                                <em>每</em>
                                                <span>
                                                    {item.buyerPurchasesNumber}
                                                </span>
                                                <span>件可用</span>
                                            </span>
                                        )}
                                    </div>

                                    <div
                                        style={{ color: item.color }}
                                        onClick={this.addCouponForOrgClick.bind(
                                            this,
                                            item,
                                            index
                                        )}
                                        className={
                                            item.disabled
                                                ? "rj_dis_card-r-bottom"
                                                : "rj_card-r-bottom"
                                        }
                                    >
                                        {item.disabled ? "已领取" : "立即领取"}
                                    </div>
                                </div>
                            </div>
                        );
                    })}
                {/* {couponList.length > 0 && (
                    <span className="rj_card_more" onClick={this.moreClick}>
                        更多
                    </span>
                )} */}

                {isShowModal && (
                    <DiscountModal
                        isShow={isShowModal}
                        res={this.result}
                        hideCb={this.hideCb}
                    />
                )}
            </div>
        );
    }
}

class DiscountModal extends React.Component {
    constructor() {
        super();
        this.state = {
            timeClose: 5
        };
    }

    componentDidMount() {
        let timer = setInterval(() => {
            this.setState({ timeClose: this.state.timeClose-1 }, () => {
                if (this.state.timeClose === 0) {
                    clearInterval(timer);
                    this.props.hideCb(false);
                }
            });
        }, 1000);
    }

    handleClick(e, isShow) {
        console.log(e.target.className);
        if (e.target && e.target.className !== "rj_l-modal") {
            return;
        }
        isShow = false;
        this.props.hideCb(isShow);
    }

    jump = () => {
        window.open(urlHook.cardpack, "_blank");
    };

    closeModal = () => {
        this.props.hideCb(false);
    };

    render() {
        const { isShow, res } = this.props;
        const { timeClose } = this.state;
        let iconType =
            res.code == "0002"
                ? "exclamation-circle-fill"
                : "check-circle-fill";
        let iconClass = res.code == "0002" ? "warn" : "success";
        return (
            <div className={isShow ? "rj_l-modal-on" : ""}>
                <div
                    className="rj_l-modal"
                    onClick={(e, isShow) => this.handleClick(e, isShow)}
                >
                </div>
                <div className="rj_l-modal-wp">
                        <div className="rj_modal-tittle">
                            <span>领取提示</span>
                            <span className="rj_l-close" onClick={this.closeModal}>
                                <Icon
                                    type="close"
                                    width={17.52}
                                    height={17.52}
                                    verticalAlign="top"
                                    color="#969696"
                                />
                        </span>
                        </div>
                        <Icon type={iconType} className={`icon ${iconClass}`} />
                        {res.code == "0002" ? (
                            <div className="rj_l_modal-err">{res.message}</div>
                        ) : (
                            <div className="rj_l-success-modal">
                                <div>
                                    <p className="zen_bold zen_fs-18">
                                        恭喜您，领取成功
                                    </p>
                                    <div className="zen_p-v-20">
                                        感谢您的参与，祝您购物愉快
                                    </div>
                                </div>
                                
                            </div>
                        )}
                        <div className="zen_m-t-9">
                            <Button onClick={this.jump}>查看优惠券</Button>
                            <Button onClick={this.closeModal} sub>关闭</Button>
                        </div>
                        <div className="zen_t-l rj_l-close-timer zen_fs-14 zen_969696 zen_p-v-20 zen_p-h-20">
                            <em>{timeClose}</em>s后关闭
                        </div>
                    </div>
            </div>
        );
    }
}

export default ShopDiscount;
